<page-header></page-header>

<div fxLayout="row wrap" class="matero-row">
  <div fxFlex="100" class="matero-col">
    <mat-card>
      <mat-card-title>Form Inline</mat-card-title>

      <form>
        <mat-form-field class="m-r-8">
          <input matInput placeholder="Username" [(ngModel)]="q.username" name="username">
        </mat-form-field>

        <mat-form-field class="m-r-8">
          <input matInput placeholder="Email" [(ngModel)]="q.email" name="email">
        </mat-form-field>

        <mat-form-field class="m-r-8">
          <mat-label>Gender</mat-label>
          <mat-select [(ngModel)]="q.gender" name="gender">
            <mat-option>-- None --</mat-option>
            <mat-option value="1">male</mat-option>
            <mat-option value="2">female</mat-option>
          </mat-select>
        </mat-form-field>

        <button mat-raised-button color="primary">Search</button>
      </form>

    </mat-card>
  </div>
  <div fxFlex="33.33" fxFlex.lt-sm="100" class="matero-col">
    <mat-card>
      <mat-card-title>Form Horizontal</mat-card-title>

      <form [formGroup]="reactiveForm1" class="form-field-full">
        <mat-form-field>
          <mat-label>Username</mat-label>
          <input matInput placeholder="Simple placeholder" formControlName="username" required>
          <mat-error *ngIf="reactiveForm1.get('username').invalid">
            {{'validations.required' | translate}}
          </mat-error>
        </mat-form-field>

        <mat-form-field>
          <mat-label>Gender</mat-label>
          <mat-select required formControlName="gender" required>
            <mat-option>-- None --</mat-option>
            <mat-option value="1">male</mat-option>
            <mat-option value="2">female</mat-option>
          </mat-select>
          <mat-error *ngIf="reactiveForm1.get('gender').invalid">
            {{'validations.required' | translate}}
          </mat-error>
        </mat-form-field>

        <mat-form-field>
          <mat-label>Mobile</mat-label>
          <input matInput placeholder="Simple placeholder" type="number" formControlName="mobile"
                 required>
          <mat-icon matSuffix>smartphone</mat-icon>
          <mat-error *ngIf="reactiveForm1.get('mobile').invalid">
            {{'validations.required' | translate}}
          </mat-error>
        </mat-form-field>

        <mat-form-field>
          <mat-label>Email</mat-label>
          <input matInput placeholder="Simple placeholder" formControlName="email" required>
          <mat-error *ngIf="reactiveForm1.get('email').invalid">
            {{getErrorMessage(reactiveForm1) | translate}}
          </mat-error>
        </mat-form-field>

        <mat-form-field>
          <mat-label>City</mat-label>
          <input matInput placeholder="Simple placeholder" formControlName="city">
        </mat-form-field>

        <mat-form-field>
          <mat-label>Address</mat-label>
          <input matInput placeholder="Simple placeholder" formControlName="address">
        </mat-form-field>

        <mat-form-field>
          <mat-label>Company</mat-label>
          <input matInput placeholder="Simple placeholder" formControlName="company">
        </mat-form-field>

        <mat-form-field>
          <mat-label>Tele</mat-label>
          <input matInput placeholder="Simple placeholder" type="number" formControlName="tele">
          <mat-icon matSuffix>phone</mat-icon>
        </mat-form-field>

        <mat-form-field>
          <mat-label>Website</mat-label>
          <input matInput placeholder="Simple placeholder" formControlName="website">
        </mat-form-field>

        <mat-form-field>
          <input matInput [matDatepicker]="picker" placeholder="Choose a date"
                 formControlName="date">
          <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
          <mat-datepicker #picker></mat-datepicker>
        </mat-form-field>

        <button mat-raised-button color="primary" class="m-t-8">Save</button>
      </form>

    </mat-card>
  </div>

  <div fxFlex="66.67" fxFlex.lt-sm="100" class="matero-col">
    <mat-card>
      <mat-card-title>Form Horizontal</mat-card-title>

      <form [formGroup]="reactiveForm2" class="form-field-full">
        <div fxLayout="row wrap" fxLayoutGap="8px grid">

          <div fxFlex="50" fxFlex.lt-sm="100">
            <mat-form-field>
              <mat-label>Username</mat-label>
              <input matInput placeholder="Simple placeholder" formControlName="username"
                     required>
              <mat-error *ngIf="reactiveForm2.get('username').invalid">
                {{'validations.required' | translate}}
              </mat-error>
            </mat-form-field>
          </div>

          <div fxFlex="50" fxFlex.lt-sm="100">
            <mat-form-field>
              <mat-label>Gender</mat-label>
              <mat-select required formControlName="gender" required>
                <mat-option>-- None --</mat-option>
                <mat-option value="1">male</mat-option>
                <mat-option value="2">female</mat-option>
              </mat-select>
              <mat-error *ngIf="reactiveForm2.get('gender').invalid">
                {{'validations.required' | translate}}
              </mat-error>
            </mat-form-field>
          </div>

          <div fxFlex="50" fxFlex.lt-sm="100">
            <mat-form-field>
              <mat-label>Mobile</mat-label>
              <input matInput placeholder="Simple placeholder" type="number"
                     formControlName="mobile" required>
              <mat-icon matSuffix>smartphone</mat-icon>
              <mat-error *ngIf="reactiveForm2.get('mobile').invalid">
                {{'validations.required' | translate}}
              </mat-error>
            </mat-form-field>
          </div>

          <div fxFlex="50" fxFlex.lt-sm="100">
            <mat-form-field>
              <mat-label>Email</mat-label>
              <input matInput placeholder="Simple placeholder" formControlName="email" required>
              <mat-error *ngIf="reactiveForm2.get('email').invalid">
                {{getErrorMessage(reactiveForm2) | translate}}
              </mat-error>
            </mat-form-field>
          </div>

          <div fxFlex="50" fxFlex.lt-sm="100">
            <mat-form-field>
              <mat-label>City</mat-label>
              <input matInput placeholder="Simple placeholder" formControlName="city">
            </mat-form-field>
          </div>

          <div fxFlex="50" fxFlex.lt-sm="100">
            <mat-form-field>
              <mat-label>Address</mat-label>
              <input matInput placeholder="Simple placeholder" formControlName="address">
            </mat-form-field>
          </div>

          <div fxFlex="50" fxFlex.lt-sm="100">
            <mat-form-field>
              <mat-label>Company</mat-label>
              <input matInput placeholder="Simple placeholder" formControlName="company">
            </mat-form-field>
          </div>

          <div fxFlex="50" fxFlex.lt-sm="100">
            <mat-form-field>
              <mat-label>Tele</mat-label>
              <input matInput placeholder="Simple placeholder" type="number" formControlName="tele">
              <mat-icon matSuffix>phone</mat-icon>
            </mat-form-field>
          </div>

          <div fxFlex="50" fxFlex.lt-sm="100">
            <mat-form-field>
              <mat-label>Website</mat-label>
              <input matInput placeholder="Simple placeholder" formControlName="website">
            </mat-form-field>
          </div>

          <div fxFlex="50" fxFlex.lt-sm="100">
            <mat-form-field>
              <input matInput [matDatepicker]="picker2" placeholder="Choose a date"
                     formControlName="date">
              <mat-datepicker-toggle matSuffix [for]="picker2"></mat-datepicker-toggle>
              <mat-datepicker #picker2></mat-datepicker>
            </mat-form-field>
          </div>

        </div>

        <button mat-raised-button color="primary" class="m-t-8">Save</button>
      </form>

    </mat-card>
  </div>

</div>
